<template>
  <view class="btn-wrap" @click="hanldeOpenAction">
    <image :src="props.icon" class="icon" />
    <text class="text">{{ props.name }}</text>
  </view>
  <nw-ActionSheet
    :show="actionSheetShow"
    :columns="props.list"
    :value="props.value"
    @confirm="handleActionSelect"
    @close="actionSheetShow = false"
  />
</template>

<script setup>
defineOptions({
  name: 'CondFilter',
  inheritAttrs: false
})

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  list: {
    type: Array,
    default: () => []
  },
  value: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['confirm'])

// 弹框参数
const actionSheetShow = ref(false)

const hanldeOpenAction = _ => {
  actionSheetShow.value = true
}

const handleActionSelect = e => {
  emit('confirm', e)
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 80rpx;
  margin-right: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;
  .icon {
    flex-shrink: 0;
    width: 38rpx;
    height: 38rpx;
  }
  .text {
    font-size: 22rpx;
    color: #666;
  }
}
</style>
